<template>
    <div class="pagination">
        <button @click="changePageNo(pageNo-1)" :disabled="pageNo===1">上一页</button>
        <button @click="changePageNo(1)" v-show="startEnd.start !== 1">1</button>
        <span v-show="startEnd.start>2">···</span>

        <!-- 连续分页 -->
       <button @click="changePageNo(index+ startEnd.start)" :class="{active:pageNo===index+startEnd.start}" v-for="(n,index) in (startEnd.end-startEnd.start+1)" :key="index">{{ index+ startEnd.start}}</button>

        <span v-show="startEnd.end <totalPage-1">···</span>
        <button @click="changePageNo(totalPage)" v-show="startEnd.end!==totalPage">{{ totalPage }}</button>
        <button @click="changePageNo(pageNo+1)" :disabled="pageNo===totalPage">下一页</button>

        <span>共 {{ total }} 条</span>
    </div>
</template>
  
<script>
//1. 计算 正常情况 连续分页： pageNo - （continues-1）/2
//2. 计算 不正常情况 连续分页：  当 传入的 continues >  totalPage ,start = 1  end = pageTotal
//3. 计算 不正常情况 连续分页: 当 start  < 1 ;start = 1;  end = continues
//4. 计算 不正常情况 连续分页: 当 end  > totalPage ;start = totalPage - continues +1;  end = totalPage
export default {
    name: "Pagination",
    props: {
        total: {  //总数
            // type: Number,
            required: true,
        },
        pageSize: {  //每页展示数量
            type: Number,
            required: true,
        },
        pageNo: { //当前页码
            type: Number,
            required: true,
        },
        continues: {  //连续页数
            // type: Number,
            // required: true,
            default:5,
        },
        changePageNo:{
            type:Function,
            required:true
        }
    },
    computed: {
        // 计算 总页码数
        totalPage() {
            return Math.ceil(this.total / this.pageSize);
        },
        // 计算 连续分页初始值和结束值
        startEnd(){
            // 解构
            let {pageNo,continues,pageSize,totalPage}=this;

            // 初始值
            let start =0;
            // 结束值
            let end =0;
            // // 计算  正常情况 连续分页：  pageNo - （continues-1）/2
            // start =this.pageNo-(this.continues-1)/2
            // end =this.pageNo+(this.continues-1)/2

            // 计算 特殊情况下 连续分页continues>totalPage
            if(continues>totalPage){
                start=1;
                end=totalPage;
            }else{
                start =pageNo-(continues-1)/2
                end =pageNo+(continues-1)/2
                // 特殊情况下  start  < 1 
                if(start<1){
                    start=1;
                    end=continues
                }
                // 特殊情况下 end>totalPage
                if(end>totalPage){
                    end=totalPage;
                    start=totalPage-continues+1
                }

            }

            return {
                start,
                end
            }
        }
    }
};
</script>
  
<style lang="less" scoped>
.pagination {
    text-align: center;

    button {
        margin: 0 5px;
        background-color: #f4f4f5;
        color: gray;
        outline: none;
        border-radius: 2px;
        padding: 0 4px;
        vertical-align: top;
        display: inline-block;
        font-size: 13px;
        min-width: 35.5px;
        height: 28px;
        line-height: 28px;
        cursor: pointer;
        box-sizing: border-box;
        text-align: center;
        border: 0;

        &[disabled] {
            color: #c0c4cc;
            cursor: not-allowed;
        }

        &.active {
            cursor: not-allowed;
            background-color: #c81623;
            color: #fff;
        }
    }

    span {
        display: inline-block;
        line-height: 28px;
        font-size: 14px;
        color: gray;
        vertical-align: middle;
    }
}
</style>